<template>
  <div class="coupon">
    <header>
      <div class="navCoup">
        <!-- 优惠券列表 -->
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </div>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chosenCoupon: -1, //当前选中优惠券的索引
      // 不可用优惠券列表
      disabledCoupons: [
        {
          id: 1, //优惠券id
          valueDesc: "5", //优惠金额
          unitDesc: "元",
          discount: 0, //折扣券 折值 整数 为0不显示折
          denominations: 100, //优惠券金额 单位分
          condition: "无使用门槛\n最多优惠12元",
          // originCondition: 500, //满减规则金额 单位分 为0显示无门槛
          value: 12, //折扣券优惠金额，单位分
          name: "优惠券名称", //优惠券名称
          description: "描述信息", //描述信息
          reason: "", //不可用原因，优惠券不可用时展示
          startAt: 1489104000, //卡有效开始时间 (时间戳, 单位秒)
          endAt: 1514592000 //卡失效日期 (时间戳, 单位秒)
        }
      ],
      // 可用优惠券列表
      coupons: [
        {
          id: 1, //优惠券id
          valueDesc: "1.5", //优惠金额
          unitDesc: "元",
          discount: 0, //折扣券 折值 整数 为0不显示折
          denominations: 100, //优惠券金额 单位分
          condition: "无使用门槛\n最多优惠12元",
          // originCondition: 500, //满减规则金额 单位分 为0显示无门槛
          value: 12, //折扣券优惠金额，单位分
          name: "优惠券名称", //优惠券名称
          description: "描述信息", //描述信息
          reason: "", //不可用原因，优惠券不可用时展示
          startAt: 1489104000, //卡有效开始时间 (时间戳, 单位秒)
          endAt: 1514592000 //卡失效日期 (时间戳, 单位秒)
        },
        {
          id: 1, //优惠券id
          valueDesc: "8.8",
          unitDesc: "折",
          discount: 0, //折扣券 折值 整数 为0不显示折
          denominations: 100, //优惠券金额 单位分
          condition: "无使用门槛\n最多优惠12元",
          // originCondition: 500, //满减规则金额 单位分 为0显示无门槛
          value: 12, //折扣券优惠金额，单位分
          name: "优惠券名称", //优惠券名称
          description: "描述信息", //描述信息
          reason: "", //不可用原因，优惠券不可用时展示
          startAt: 1489104000, //卡有效开始时间 (时间戳, 单位秒)
          endAt: 1514592000 //卡失效日期 (时间戳, 单位秒)
        }
      ]
    };
  },
  methods: {
    // 优惠券切换回调按钮
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      this.$router.push("/order/submit");
    },
    // 兑换优惠券回调按钮
    onExchange(code) {
      this.coupons.push(code);
    }
  }
};
</script>
<style lang="less" >
 .van-coupon h2 {
    height: 34px;
    font-weight: 600;
    line-height: 34px;
}
</style>

<style lang="less" scoped>
.coupon {
  width: 100vw;
  height: 100vh;
  background-color: F8F8F8;
  header {
    .navCoup {
      height: 100vh;
      .van-coupon-list {
        .van-coupon__body
        .van-coupon__name {
          font-weight: 700;
          font-size:30px;
        }
      }
    }
  }
}
</style>